<template>
  <div>
      <div id="searchBox">
     <el-input v-model="input" placeholder="请输入内容" style="width:15%"></el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" >清空</el-button>
  </div>
  <div>
      <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="index"
      width="55">
    </el-table-column>
    <el-table-column
      label="工号"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="用户手机号"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column
      prop="nickName"
      label="用户昵称"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column
      prop="img"
      label="用户头像"
      show-overflow-tooltip>
     <el-image :src="salt"></el-image>
    </el-table-column>
    <el-table-column label="操作">
      <template >
        <el-button
          size="mini"
          icon="el-icon-info"
          >分配角色</el-button>
        <el-button
          size="mini"
          icon="el-icon-edit"
         >编辑员工信息</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          >删除员工</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  </div>
</template>

<script>
export default {
 data() {
    return {
      input: '',
       tableData: [],
        multipleSelection: []
    }
  },
     methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      async getAlluser(){
        const res = await this.api.personnel.getUsers({page:1,limit:8})
        if(res.code==200){
         this.tableData=res.data.items
         console.log(this.tableData)
        }
      },
    },
    created(){
      this.getAlluser()
    }
}
</script>

<style scoped lang="scss">
#searchBox{
  text-align: left;
}
</style>